<template>
  <div class="index-page p-3">
    <ClientOnly>
      <HelloWorld></HelloWorld>
    </ClientOnly>
    <DateTime format="YYYY-MM-DD HH:mm:ss dddd"></DateTime>

    <p>计数器: {{ customStore.customVal }}</p>
    <el-button type="primary" @click="customStore.increment">增加</el-button>
    <el-button type="danger" plain @click="customStore.decrement">减少</el-button>

    <p>{{ apiBase }}</p>

    <p>用户失去活动(5秒): {{ idle }}</p>

    <div style="width: 100px">
      <el-select v-model="settingStore.theme">
        <el-option value="system">System</el-option>
        <el-option value="light">Light</el-option>
        <el-option value="dark">Dark</el-option>
      </el-select>
    </div>

    <el-button @click="goHome">去主页</el-button>
  </div>
</template>

<script setup>
import { useCustomStore } from '~/stores/custom'
import { useIdle } from '@vueuse/core'

/**
 * 元数据
 * @see https://nuxt.com/docs/4.x/api/utils/define-page-meta
 */
definePageMeta({
  name: 'Index',
  layout: 'default',
  keepalive: true,
  pageTransition: {
    name: 'blur',
    mode: 'out-in'
  }
})

const pData = ref({ a: 'ok' })

provide('P_DATA', pData)

handleData()
function handleData() {
  setTimeout(() => {
    pData.value = { a: 'ok', b: 'no' }
    console.log('pData.value :>> ', pData.value)
  }, 3000)
}

// 运行时
const config = useRuntimeConfig()
const apiBase = config.public.apiBase

const customStore = useCustomStore()
const settingStore = useSettingStore()

const { idle } = useIdle(5000) // 跟踪用户是否处于非活动状态 5秒

function goHome() {
  navigateTo('/home')
}
</script>

<style lang="scss" scoped>
.index-page {
  font-size: 20px;
  border: 10px solid var(--primary-color);
}
</style>
